<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <title>IOT-WWT</title>
    <%@include file="../pubtag.jsp"%>
</head>
<body>
<table id="userDg"></table>

<!-- 表格工具栏开始 -->
<div id="userDg-toolbar" class="topjui-toolbar"
     data-options="grid:{
           type:'datagrid',
           id:'userDg'
       }">
    <a id="add" href="javascript:void(0)">新增</a>
    <a id="edit" href="javascript:void(0)">编辑</a>
    <a id="delete" href="javascript:void(0)">删除</a>

    <form id="queryForm" class="search-box">
        <input type="text" name="name" data-toggle="topjui-textbox"
               data-options="id:'name',prompt:'产品名称'">
        <input type="text" name="code" data-toggle="topjui-textbox"
               data-options="id:'code',prompt:'产品型号'">
        <a id="queryBtn" href="javascript:void(0)">查询</a>
    </form>
</div>
<!-- 表格工具栏结束 -->

<script>
    $(function () {
        var userDg = {
            type: 'datagrid',
            id: 'userDg'
        };

        $("#userDg").iDatagrid({
            id: 'userDg',
            url: '${BASE_PATH}/user/userList.do',
            columns: [[
                {field: 'id', title: 'ID', checkbox: true},
                {field: 'name', title: '登录名称', sortable: true},
                {field: 'nickName', title: '用户名称', sortable: true},
                {field: 'status', title: '状态', sortable: true},
                {field: 'name', title: '所属公司', sortable: true},
                {field: 'name', title: '所属角色', sortable: true}
            ]]
        });

        $("#add").iMenubutton({
            event: 'openDialog',
            iconCls: 'fa fa-plus',
            dialog: {
                id: 'userAddDialog',
                height: 350,
                href: '${BASE_PATH}/user/toAdd.do',
                buttonsGroup: [
                    {
                        text: '保存',
                        url: '${BASE_PATH}/user/saveOrUpdateUser.do',
                        iconCls: 'fa fa-plus',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn-normal'
                    }
                ]
            }
        });

        $("#edit").iMenubutton({
            event: 'openDialog',
            iconCls: 'fa fa-pencil',
            btnCls: 'topjui-btn',
            grid: userDg,
            dialog: {
                width: 950,
                height: 500,
                href: _ctx + '/html/complex/dialog_edit.html?uuid={uuid}',
                url: _ctx + '/json/product/detail.json?uuid={uuid}',
                buttonsGroup: [
                    {
                        text: '更新',
                        url: _ctx + '/json/response/success.json',
                        iconCls: 'fa fa-save',
                        handler: 'ajaxForm',
                        btnCls: 'topjui-btn'
                    }
                ]
            }
        });

        $("#delete").iMenubutton({
            event: 'doAjax',
            iconCls: 'fa fa-trash',
            btnCls: 'topjui-btn-normal',
            confirmMsg: '这个是勾选复选框实现多条数据的Ajax删除提交操作，提交grid.param中指定的参数值',
            grid: {
                type: 'datagrid',
                id: 'userDg',
                uncheckedMsg: '请先勾选要删除的数据',
                param: 'uuid:uuid,code:code'
            },
            url: _ctx + '/json/response/success.json'
        });

        $("#filter").iMenubutton({
            event: 'filter',
            btnCls: 'topjui-btn-warm',
            grid: userDg
        });

        $("#search").iMenubutton({
            event: 'search',
            btnCls: 'topjui-btn-danger',
            grid: userDg
        });

        $("#import").iMenubutton({
            event: 'import',
            btnCls: 'topjui-btn-normal',
            uploadUrl: _ctx + '/json/response/upload.json',
            url: _ctx + '/json/response/success.json'
        });

        $("#export").iMenubutton({
            event: 'export',
            btnCls: 'topjui-btn',
            url: _ctx + '/json/response/export.html'
        });

        $("#openTab").iMenubutton({
            event: 'openTab',
            btnCls: 'topjui-btn-normal',
            tab: {
                title: '这是新的Tab窗口',
                href: _ctx + '/html/complex/panel_add.html'
            },
            grid: userDg
        });

        $("#openWindow").iMenubutton({
            event: 'openWindow',
            btnCls: 'topjui-btn-warm',
            href: 'http://www.topjui.com?uuid={uuid}',
            grid: userDg
        });

        $('#request').iMenubutton({
            event: 'request',
            btnCls: 'topjui-btn',
            url: _ctx + '/json/response/success.json'
        });

        $('#myFun').iMenubutton({
            btnCls: 'topjui-btn-normal',
            onClick: myQuery
        });

        $('#queryBtn').iMenubutton({
            event: 'query',
            iconCls: 'fa fa-search',
            btnCls: 'topjui-btn-danger',
            form: {id: 'queryForm'},
            grid: {type: 'datagrid', 'id': 'userDg'}
        });
    });

    // 自定义方法
    function myQuery() {
        // 提示信息
        $.iMessager.alert('自定义方法', '自定义方法被执行了！', 'messager-info');

        var checkedRows = $('#userDg').iDatagrid('getChecked');
        console.log(checkedRows);

        var selectedRow = $('#userDg').iDatagrid('getSelected');
        console.log(selectedRow);

        // 提交参数查询表格数据
        $('#userDg').iDatagrid('reload', {
            name: $('#name').iTextbox('getValue'),
            code: $('#code').iTextbox('getValue')
        });
    }
</script>
</body>
</html>